if(navigator.serviceWorker) {
    let sendMsgBtn = document.getElementById('send-msg-button')
    let msgInput = document.getElementById('msg-input')
    // 点击按钮事件
    sendMsgBtn.addEventListener('click', function() {
        // 点击按钮以后，发送信息到service worker
        console.log(msgInput.value)
        navigator.serviceWorker.controller.postMessage(msgInput.value)
    })
    // 添加message监听事件
    let msgBox = document.getElementById('msg-box')
    navigator.serviceWorker.addEventListener('message', function(event) {
        console.log('监听到了message事件', msgBox)
        const h2 = document.createElement('h2')
        h2.innerHTML = event.data.message
        msgBox.appendChild(h2)
      })
    // 注册
    navigator.serviceWorker.register('./msg-sw.js',{scope: './'}).then(function(reg){
        console.log(reg)
    }).catch(function(e){
        console.log(e)
    })
} else {
    alert('Service worker is not supported!')
}